<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css" />

    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入样式vant.js -->
    <script src="../common/ui/vant-ui/ui.js"></script>
     <!-- 地图 -->
     <script
     type="text/javascript"
     src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=MosSE8eTXhMdg0ZtRGAdH4GPfzsD7Lqd"
   ></script>
  </head>
  <body>
    <div id="app">
      <div id="map"></div>
    </div>
  </body>
</html>
<style>
 #map {
    /* width: 1000px; */
    height: 500px;
  }
</style>
<script>
  new Vue({
    el: "#app",
    data() {
    return {
      
    };
  },
  mounted() {
        this.getMap();
    },
  methods: {
      getMap() {
        var map = new BMapGL.Map("map"); // 创建地图实例
        var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.setHeading(64.5); //设置地图旋转角度
        map.setTilt(73); //设置地图的倾斜角度
        var map = new BMapGL.Map("allmap", {
          enableRotate: false,
          enableTilt: false,
        });
      },
    },
  });
</script>
